<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- jq是对js封装一个类库，特点：写更少的代码，实现更多的功能。 -->
    <!-- vue 是基于js的一个框架，采用的mvvm模式。 -->
    <div id="app">
       <div class="num">{{num}}</div>
       <div>{{str}}</div>
       <button @click="add">累加</button>
    </div>
    <a href="./send.html">跳转</a>
    <!-- <div>{{num}}</div> 在vue的作用域之外了 -->
</body>
</html>
<script src="./vue.js"></script>
<!-- <script src="./index.js"></script> -->
<script>
    let app = new Vue({ // Vue 就是一个构造函数 
        el:"#app",
        data:{
          num: 10,
          str: "456"
        },
        methods: {
          add(){
            this.num++;
            console.log('我被执行了');
          }
        },
    })
   
    console.log(app);
    let number = 10;
    Object.defineProperty(app,'num',{
        set(val){
           number = val;
           document.querySelector('.num').innerHTML = val;
        },
        get(){
          return number;
        }
    })


    // 虚拟节点 把节点信息封装成一个对象，来描述节点信息
    
    //  {
    //     name: "div",
    //     attr: "id",
    //     attrVal: "#app",
    //     children:[{
    //       name: "div",
    //       attr: "class",
    //       attrVal: "num"
    //     }]
    //  }

    // diff 算法，做节点对比，只更新，值改变的节点。


    // let obj = {
    //     num: 1
    // }
    // // defineProperty 可以用来劫持对象
    // // 第一个参数是要劫持的对象名，第二个参数是你要劫持的 属性名
    // let i = null;
    // Object.defineProperty(obj,"num",{
    //     get(){
    //      return i*10
    //     },
    //     set(val){
    //       i = val
    //     }
    // })
    // // 当我们去使用被劫持的属性值的时候，会自动触发，get 方法
    // // 当我们去设置的时候会自动触发，set 方法
    // // console.log(obj.num);
    // obj.num = 100;
    // console.log(obj.num);
</script>